<template>
  <div class="bigBox">
    <h1>{{NowYear}}年节日倒计时</h1>
    <div class="glass-container">
      <div class="countBox">
        清明节还有：{{isTrue(allTime.qmTime.day)}}天{{isTrue(allTime.qmTime.hour)}}时{{isTrue(allTime.qmTime.minutes)}}分{{isTrue(allTime.qmTime.seconds)}}秒
      </div>
      <div class="countBox">
        劳动节还有：{{isTrue(allTime.laborTime.day)}}天{{isTrue(allTime.laborTime.hour)}}时{{isTrue(allTime.laborTime.minutes)}}分{{isTrue(allTime.laborTime.seconds)}}秒
      </div>
      <div class="countBox">
        端午节还有：{{isTrue(allTime.dragonTime.day)}}天{{isTrue(allTime.dragonTime.hour)}}时{{isTrue(allTime.dragonTime.minutes)}}分{{isTrue(allTime.dragonTime.seconds)}}秒
      </div>
      <div class="countBox">
        中秋节还有：{{isTrue(allTime.midTime.day)}}天{{isTrue(allTime.midTime.hour)}}时{{isTrue(allTime.midTime.minutes)}}分{{isTrue(allTime.midTime.seconds)}}秒
      </div>
      <div class="countBox">
        国庆节还有：{{isTrue(allTime.natTime.day)}}天{{isTrue(allTime.natTime.hour)}}时{{isTrue(allTime.natTime.minutes)}}分{{isTrue(allTime.natTime.seconds)}}秒
      </div>
      <div class="countBox">
        2024年春节还有：{{isTrue(allTime.springTime.day)}}天{{isTrue(allTime.springTime.hour)}}时{{isTrue(allTime.springTime.minutes)}}分{{isTrue(allTime.springTime.seconds)}}秒
      </div>
    </div>
    <div class="imgRotation">
      <img :style="{transform: `rotate(${czpdeg})`}" src="../../../assets/czptx.png" alt="车哥头像">
      <img :style="{transform: `rotate(${lwjdeg})`}" src="../../../assets/lwjtx.png" alt="君哥头像">
      <img :style="{transform: `rotate(${lldeg})`}" src="../../../assets/lltx.png" alt="罗亮头像">
      <img :style="{transform: `rotate(${zydeg})`}" src="../../../assets/zytx.png" alt="郑宇头像">
      <img class="lhbms" src="../../../assets/lhbtx.png" alt="硫化冰头像">
    </div>
    <div class="fire-left">
      <img src="@/assets/fire.png" alt="左烟花">
    </div>
    <div class="fire-right">
      <img src="@/assets/fire.png" alt="右烟花">
    </div>
    <div class="smallFire1 smallFire">
      <img src="@/assets/smallFire1.png" alt="smallFire1">
      <div class="light-dot"></div>
    </div>
    <div class="smallFire2 smallFire">
      <img src="@/assets/smallFire2.png" alt="smallFire2">
    </div>
    <div class="smallFire3 smallFire">
      <img src="@/assets/smallFire3.png" alt="smallFire3">
    </div>
    <div class="smallFire4 smallFire">
      <img src="@/assets/smallFire4.png" alt="smallFire4">
      <div class="light-dot"></div>
    </div>
    <div class="smallFire5 smallFire">
      <img src="@/assets/smallFire5.png" alt="smallFire5">
      <div class="light-dot"></div>
    </div>
  </div>
</template>

<script setup>
import {ref,reactive,watch, onUnmounted} from "vue"
import { useDataSpace } from '@/store/dataSpace.js'


  // 响应式存储时间
  let allTime = reactive({
    springTime: {},
    laborTime: {},
    qmTime: {},
    dragonTime : {},
    midTime: {},
    natTime: {},
  })

  let czpdeg = ref('0deg')
  let lwjdeg = ref('0deg')
  let lldeg = ref('0deg')
  let zydeg = ref('0deg')

  // 计算时间函数
  function compoutTime(activeTime,time, mark){
    // 获取未来某个事件节点
    let activeDate = new Date(activeTime)
    let active = activeDate.getTime()

    // 获取到当前时间
    let date = new Date()
    let nowtime = date.getTime()

    // 获取到两者的时间差
    let activeDiff = active - nowtime

    if(activeDiff >= 0){

      time.day = Math.floor(activeDiff/1000/60/60/24)  // 天
      time.hour = Math.floor(activeDiff/1000/60/60%24) < 10 ? '0' + Math.floor(activeDiff/1000/60/60%24) : Math.floor(activeDiff/1000/60/60%24)  // 时
      time.minutes = Math.floor(activeDiff/1000/60%60) < 10 ? '0' + Math.floor(activeDiff/1000/60%60) : Math.floor(activeDiff/1000/60%60)  // 分
      time.seconds = Math.floor(activeDiff/1000%60) < 10 ? '0' + Math.floor(activeDiff/1000%60) : Math.floor(activeDiff/1000%60)   // 秒

      // 对头像的旋转角度进行计算
      if(mark){
        zydeg.value = time.seconds === '00' ? '0deg' : (360-((360 / 60) * Number(time.seconds))) + 'deg'
        lldeg.value = ((360 / 60) * Number(time.minutes)) + 'deg'
        lwjdeg.value = ((360 / 24) * Number(time.hour)) + 'deg'
        czpdeg.value = ((360 / 365) * Number(time.day)) + 'deg'
      }
    }
  }
  
  function allDays(){
    let {qmTime, laborTime, dragonTime, midTime, natTime, springTime} = useDataSpace().festivalsList
    compoutTime(qmTime,allTime.qmTime) //清明节
    compoutTime(laborTime,allTime.laborTime) // 劳动节
    compoutTime(dragonTime,allTime.dragonTime)  // 端午节
    compoutTime(midTime,allTime.midTime)   // 中秋节
    compoutTime(natTime,allTime.natTime)   // 国庆节
    compoutTime(springTime,allTime.springTime, 'isSpring') // 春节
  }

  allDays()
  console.log(allTime)

  const timer = ref()
  // 计时器每一秒执行一次
  timer.value = setInterval(() => {
    allDays()
  },1000)

  function isTrue(value){
    return value ? value : '--'
  }

  // 动态计算当前年份
  let NowYear = ref(0)

  function computeNowYear(){
    let dateYear = new Date().getFullYear()
    console.log(dateYear)
    let stringDate = ""+dateYear
    NowYear.value = stringDate.slice(2)
  }
  computeNowYear()


  // 销毁组件之前将永久定时器取消
  onUnmounted(() => {
    clearInterval(timer.value)
  })

</script>
<style lang='less' scoped>
// 主体部分
.bigBox{
  position: relative;
  min-height: 715px;
  background-color: #3d61f3;

  // 左边大鞭炮
  .fire-left{
    position: absolute;
    left: 200px;
    top: 0;
    width: 100px;
    transform: rotate(50deg);
    transform-origin: 72% top;
    animation: windBlowingLeft 4s ease-in-out infinite;
    img{
      width: 100px;
    }
  }

  // 右边大鞭炮
  .fire-right{
    position: absolute;
    right: 200px;
    top: 0;
    width: 100px;
    transform: rotate(-50deg);
    transform-origin: 72% top;
    animation: windBlowingRight 5.5s ease-in-out infinite;
    img{
      width: 100px;
    }
  }

  // 小两点
  .light-dot{
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    background-color: #cd131e;
    border-radius: 50%;

    &::after{
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
      border-radius: 50%;
      content: '';
      width: 10px;
      height: 10px;
      background-color: red;
      filter: blur(4px);
      transform: scale(3);
      animation: fireChange 3s linear infinite;
    }
  }
}

// 小鞭炮
.smallFire{
  width: 100px;
  img{
    width: 50px;
  }
}

.smallFire1{
  position: absolute;
  bottom: 0;
  left: 10%;
  animation: fireUpLeft 5s ease-in-out infinite;
  .light-dot{
    left: 0px;
    bottom: 10px;
  }
}
.smallFire2{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: rotate(30deg);
}
.smallFire3{
  position: absolute;
  bottom: 0;
  left: 30%;
  transform: rotate(-50deg);
}
.smallFire4{
  position: absolute;
  bottom: 0;
  left: 70%;
  transform: rotate(-60deg);
  .light-dot{
    left: 18px;
    top: -110px;
  }
}
.smallFire5{
  position: absolute;
  bottom: 0;
  left: 90%;
  animation: fireUpRight 6s ease-in-out infinite;
  .light-dot{
    left: 0px;
    bottom: 10px;
  }
}

// 毛玻璃效果
.glass-container{
    width: 50%;
    margin: 0 auto;
    margin-top: 20px;
    color: white;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    backdrop-filter: blur(3px);
    background-color: rgba(0,191,255, 0.15);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border: 2px rgba(255,255,255,0.4) solid;
    border-bottom: 2px rgba(40,40,40,0.35) solid;
    border-right: 2px rgba(40,40,40,0.35) solid;
}

// 文字部分
.countBox{
  line-height: 70px;
  font-size: 30px;
  margin: 0 auto;
  font-weight: 600;
  background-image: linear-gradient(60deg, #fccb90  ,#30cfd0);
  -webkit-background-clip: text;
  background-size: 300%;
  color: transparent;
  animation: moveBack 4s linear infinite;
}

// 动画
@keyframes moveBack{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

@keyframes fireChange{
  0%{
      filter: blur(1px);
      transform: scale(0);
  }
  50%{
      filter: blur(5px);
      transform: scale(3);
  }
  100%{
      filter: blur(1px);
      transform: scale(0);
  }
}
@keyframes fireUpRight{
  0%{
    bottom: 0;
  }
  50%{
    bottom: 500px;
  }
  100%{
    bottom: 0;
  }
}
@keyframes fireUpLeft{
  0%{
    bottom: 0;
  }
  50%{
    bottom: 400px;
  }
  100%{
    bottom: 0;
  }
}
@keyframes windBlowingLeft{
  0%{
    transform: rotate(50deg);
  }
  50%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(-50deg);
  }
}
@keyframes windBlowingRight{
  0%{
    transform: rotate(-50deg);
  }
  50%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(50deg);
  }
}
// 时钟齿轮
.imgRotation{
  display: flex;
  width: 46%;
  height: 200px;
  margin: 0 auto;
  img{
    width: 150px;
    height: 150px;
    // transition: all 1s linear;
  }

  .lhbms{
    animation: rotate360 1s infinite linear;
  }
}

@keyframes rotate360{
  0% { transform: rotate(1deg)}
  100% { transform: rotate(360deg)}
}
</style>